<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /**
     * 1.声明了doctype 时
     * document.documentElement.clientHeight 指就是浏览器可视窗口的大小
     * document.body.clientHeight 指body自身的contentHeight + padding*2 - 滚动条的width  所以跟普通元素处理的方式是一样的
     *
     * 2.未声明doctype时
     * document.documentElement.clientHeight 依然指就是浏览器可视窗口的大小,但在IE456 版本下 为0,
     * document.body.clientHeight 也是指浏览器可视窗口的大小  在IE456版本下也能正确计算出大小
     *
     * 所以在以前有一种兼容的写法就是： clientHeight = document.documentElement.clientHeight || document.body.clientHeight 保证能准确获取到视口的大小
     * 因此我们html模板中要准确声明doctype，就不用做这种兼容的处理
     */
     var htmlClientHeight =  document.documentElement.clientHeight;
     var bodyClientHeight = document.body.clientHeight;
     console.log('htmlClientHeight:',htmlClientHeight) // 指浏览器可视窗口大小，在IE456下为0
     console.log('bodyClientHeight:',bodyClientHeight) // 如果为0 是因为contentHeight高度为0，padding为0
</script>
</body>
</html>
